<template>
  <div>
    <van-nav-bar class="epgis-navbar" :title="title" :fixed="true"  :border='false'>
      <template #title>
        <div @click="show_vconsole()">{{title}}
        </div>
      </template>
      <div slot="left" @click="() => clickBack()" v-if="!isBackBtnVisiable">
        <van-icon name="arrow-left" class="back-icon" color="white" />
      </div>
      <div slot="right">
        <slot name="right" class="flex"></slot>
      </div>
    </van-nav-bar>
    <div class="app-container">
      <slot name="container">
        
      </slot>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  props: ["title", "isBackBtnVisiable"],
  data() {
    return {
    };
  },
  methods: {
    clickBack: function() {
      console.log("点击返回");
      history.go(-1);
    },
    show_vconsole: function() {
        const nowTime = new Date().getTime();
      if (nowTime - this.lastClickTime < 3000) {
        this.count++;
      } else {
        this.count = 0;
      }
      this.lastClickTime = nowTime;
      if (this.count >= 2) {
        let vconDom = document.getElementById("__vconsole");
        this.toggleClass(vconDom, "vconsoleShow");
        this.count = 0;
      }
    },
    hasClass: function(obj, cls) {
      return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    },
    addClass: function(obj, cls) {
       if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    },
    toggleClass: function(obj, cls) {
      if (this.hasClass(obj, cls)) {
        this.removeClass(obj, cls);
      } else {
        this.addClass(obj, cls);
      }
    },
    removeClass: function(obj, cls) {
     if (this.hasClass(obj, cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        obj.className = obj.className.replace(reg, " ");
      }
    },
  
   
  }
};
</script>

<style lang="less">
.epgis-navbar {
  background: @primary-color;
  color: white !important;
  border: none;
  height: 42px;
  .back-icon {
    vertical-align: middle;
  }
  .navbar-title {
    color: white !important;
  }
  .van-nav-bar__title {
    color: white !important;
  }
  .van-nav-bar__content {
    height: 42px;
  }
}
.flex{
  display: flex;
  *{
    vertical-align: middle;
  }
}
.app-container {
  position: absolute;
  top: 42px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgb(247, 248, 250);
}


</style>>